<template>
  <section>
    <div class="dianwei1" v-for="(item,index) in data" :style="{top:item.top,left:item.left}" :key="index">
      <div class="dianwei_item1">
        <div class="dianwei_item1_tittle">
          {{item.item1}}
        </div>
        <div>{{item.item2}}</div>
        <div>{{item.item3}}</div>
        <div>{{item.item4}}</div>
      </div>
      <div class="dianwei_item2">
        <div class="dianwei_item2_item"></div>
      </div>
      <div class="dianwei_item3">
        <img class="dianwei_item3_dianwei" src="../../assets/img/dianwei_item2_dianwei.png" alt="">
      </div>
    </div>
  </section>
</template>

<script>
export default {
  data(){
    return{
      data:[
        {
          item1:'计算机学院',
          item2:'3584人流',
          item3:'电耗：74174kw.h',
          item4:'水耗：97414㎡',
          top:'300px',
          left:'1190px',
        },
        {
          item1:'医学院',
          item2:'1404人流',
          item3:'电耗：45403kw.h',
          item4:'水耗：7544㎡',
          top:'310px',
          left:'1456px',
        },
        {
          item1:'大礼堂',
          item2:'1000人流',
          item3:'电耗：45503kw.h',
          item4:'水耗：5454㎡',
          top:'416px',
          left:'1590px',
        },
        {
          item1:'办公区',
          item2:'2454人流',
          item3:'电耗：5503kw.h',
          item4:'水耗：8254㎡',
          top:'444px',
          left:'1190px',
        },
        {
          item1:'图书馆',
          item2:'11404人流',
          item3:'电耗：454kw.h',
          item4:'水耗：744㎡',
          top:'700px',
          left:'1330px',
        },
        {
          item1:'创新创业中心',
          item2:'114人流',
          item3:'电耗：1454kw.h',
          item4:'水耗：1744㎡',
          top:'700px',
          left:'1720px',
        },
        {
          item1:'校医院',
          item2:'1184人流',
          item3:'电耗：77874kw.h',
          item4:'水耗：9774㎡',
          top:'750px',
          left:'1990px',
        },
        {
          item1:'商业集合区',
          item2:'11784人流',
          item3:'电耗：7774kw.h',
          item4:'水耗：1784㎡',
          top:'310px',
          left:'1900px',
        },
        {
          item1:'街区集市',
          item2:'1000人流',
          item3:'电耗：18760kw.h',
          item4:'水耗：29192㎡',
          top:'595px',
          left:'342px',
        },
        {
          item1:'教职工宿舍区',
          item2:'1000人流',
          item3:'电耗：18760kw.h',
          item4:'水耗：29192㎡',
          top:'790px',
          left:'110px',
        },
      ]
    }
  },
  methods:{

  },
  mounted(){

  }
}
</script>

<style scoped>
.dianwei_item3{
  position: absolute;
  bottom:-12px;
  left:0px;
  width:100%;
  height:15px;
  display: flex;
  justify-content: center;
}
.dianwei_item3_dianwei{
  width:16px;
}
.dianwei_item2{
  display: flex;
  justify-content: center;
  height:70px;
}
.dianwei_item2_item{
  height:100%;
  width:2px;
  background:#00f9ff;
  display: inline-block;
}
  .dianwei1{
    position:absolute;
    /* top:300px;
    left:1190px; */
  }
  .dianwei_item1{
    border:1px solid #00eeff;
    background:rgba(5, 24, 39, 0.8);
    box-sizing: border-box;
    color:#17f8fd;
    font-size:12px;
    padding:8px 5px 10px 14px;
    width:180px;
    border-radius:10px;
  }
  .dianwei_item1 div{
    line-height: 100%;
    margin-top:5px;
  }
  .dianwei_item1 div:first-child{
    margin:0px;
  }
  .dianwei_item1_tittle{
    color:#17f8fd;
    font-weight: 600;
    font-size:14px;
  }
</style>